import React, { useEffect, useState } from 'react'
import { Tabs } from 'antd-mobile'
import { AddCircleOutline } from 'antd-mobile-icons'
import _ from 'lodash'


import MyHeader from '../../components/MyHeader'
import { useNavigate } from 'react-router-dom'
import { useRequest } from 'ahooks'
import { getmytravelsAPI } from '../../api/api'
import { set } from 'lodash'
import ItemOne from '../../components/ItemOne'

const Find = () => {
  const router = useNavigate()
  const [activeKey, setActiveKey] = useState('time')
  const [list, setList] = useState([])
  const [arr, setArr] = useState([])

  // 热度升序
  const HotAsc = (a: any, b: any) => {
    return a['hot'] - b['hot']
  }
  // 降序
  const HotDesc = (a: any, b: any) => {
    return b['hot'] - a['hot']
  }
  // 时间升序
  const TimeAsc = (a: any, b: any) => {
    return a['time'] - b['time']
  }
  // 降序
  const TimeDesc = (a: any, b: any) => {
    return b['time'] - a['time']
  }

  const changeKeys = (value: string) => {
    setActiveKey(value)
    if (value == 'time') {
      setList(_.cloneDeep(arr).sort(TimeDesc))
    } else {
      setList(_.cloneDeep(arr).sort(HotDesc))
    }
  }


  const getmytravelsList = useRequest(getmytravelsAPI, {
    manual: true,
    onSuccess: (res: any) => {
      console.log(res);

      setArr(res.result)
      setList(res.result.sort(TimeDesc))
      // setList(res.result)
    }
  })

  useEffect(() => {
    getmytravelsList.run()
  }, [])


  return (
    <div>
      <MyHeader title='发 现'>
        <div style={{ marginLeft: '-20px', fontSize: '15px' }} onClick={() => router('/submit')}>
          <AddCircleOutline />
          <span style={{ marginLeft: '5px' }}>发布</span>
        </div>
      </MyHeader>


      <Tabs activeKey={activeKey} onChange={changeKeys}>
        <Tabs.Tab title='我的最新' key='time'>
          <div>
            <ItemOne list={list} flag={true}></ItemOne>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title='我的最热' key='hot'>
          <div>
            <ItemOne list={list} flag={true}></ItemOne>
          </div>
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default Find
